<template>
  <a-flex vertical :gap="'middle'">
    <Bubble.List
      :roles="roles"
      :style="{ maxHeight: 300 }"
      :items="parsedMessages.map(({ id, message, status }) => ({
        key: id,
        loading: status === 'loading',
        ...message,
      }))"
    />
    <Sender
      :loading="senderLoading"
      :value="content"
      @change="setContent"
      @submit="handleSubmit"
    />
  </a-flex>
</template>

<script setup name="BubbleSuggestions">
import { ref, h } from 'vue'
import { SmileOutlined, UserOutlined } from '@ant-design/icons-vue'
import {Attachments, Bubble, Prompts, Sender, useXAgent, useXChat} from 'ant-design-x-vue'
import {Flex, Typography, Table} from "ant-design-vue";

const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000))
const renderTable = (content) => h(Typography, null, {
	default: () => h('div', null, [
		h(Table, {
			columns: [
				{ title: '姓名', dataIndex: 'name', key: 'name' },  // 修改列定义
				{ title: '年龄', dataIndex: 'age', key: 'age' }    // 修改列定义
			],
			dataSource: [  // 替换为静态数据
				{ key: 1, name: '张三', age: 28 },
				{ key: 2, name: '李四', age: 32 },
				{ key: 3, name: '王五', age: 25 }
			],
			size: 'small',
			bordered: true,
			pagination: false
		})
	])
})
const roles = {
  user: {
    placement: 'end',
    avatar: { icon: h(UserOutlined), style: { background: '#87d068' } },
  },
  text: {
    placement: 'start',
    avatar: { icon: h(UserOutlined), style: { background: '#fde3cf' } },
    typing: true,
  },
	sqldata:{
		placement:'start',
		avatar: { icon: h(UserOutlined), style: { visibility: 'hidden' } },
		messageRender: renderTable
	},
  suggestion: {
    placement: 'start',
    avatar: { icon: h(UserOutlined), style: { visibility: 'hidden' } },
    variant: 'borderless',
    messageRender: (content) => h(Prompts, {
      vertical: true,
      items: content.map((text) => ({
        key: text,
        icon: h(SmileOutlined, { style: { color: '#FAAD14' } }),
        description: text,
      }))
    })
  },
}

const content = ref('')
const senderLoading = ref(false)

// Agent for request
const [agent] = useXAgent({
  request: async ({ message }, { onSuccess }) => {
    senderLoading.value = true
    await sleep()

    const { content } = message || {}

    senderLoading.value = false
    onSuccess({
      type: 'ai',
      list: [
        {
          type: 'text',
          content: 'Do you want?',
        },
        {
          type: 'suggestion',
          content: [`Look at: ${content}`, `Search: ${content}`, `Try: ${content}`],
        },
        {
          type:'sqldata',
          content: [`SQL查询结果 ${content}`],
        }
      ],
    })
  },
})

// Chat messages
const { onRequest, parsedMessages } = useXChat({
  agent: agent.value,

  defaultMessages: [
    {
      id: 'init',
      message: {
        type: 'ai',
        content: 'Hello, what can I do for you?',
      },
      status: 'success',
    },
  ],

  requestPlaceholder: {
    type: 'ai',
    content: 'Waiting...',
  },

  // Convert AgentMessage to BubbleMessage
  parser: (agentMessages) => {
    const list = agentMessages.content ? [agentMessages] : agentMessages.list

    return (list || []).map((msg) => ({
      role: msg.type,
      content: msg.content,
    }))
  },
})

const setContent = (v) => {
  content.value = v
}

const handleSubmit = (nextContent) => {
  onRequest({
    type: 'user',
    content: nextContent,
  })
  content.value = ''
}
</script>
